<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref, computed } from 'vue';
import type { IQrCode } from '@/simba/types';
	import { useConserve } from '@/simba/hooks/conserve';
	const { onQrcodeScanHandler, getConserveList, deleteConserve } = useConserve()
	import sheep from '@/sheep';
	const user = computed(() => sheep.$store('user').userInfo);

	import type { IConserveMemberList } from '@/simba/types/conserve.d';
	const listConserveMemberAll = ref<IConserveMemberList>([])
	const listConserveMember = ref<IConserveMemberList>([])
	const listConserveMemberU = ref<IConserveMemberList>([])
	onShow(async() => {
		//获取当前用户的共同养护人
		listConserveMemberAll.value = await getConserveList(user.value.id)
		getConserveMember()
	})
	
	function getConserveMember(){
		listConserveMember.value = listConserveMemberAll.value.filter(item=>{
			return item.statusApprova === 1 // 已同意
		})
		listConserveMemberU.value = listConserveMemberAll.value.filter(item=>{
			return item.statusApprova === 0 // 待审批
		})
	}

	const qrCodeRef = ref(null)
	const qrCode = ref<IQrCode>({
		size: 200,
		val: '250',
		icon: 'https://flowers.oss-cn-beijing.aliyuncs.com/images/icon-weather/xiaoxue.png'
	})
	async function onDeleteConservPersonHandler(id: number){
		deleteConserve(id)
		
		// const result = await deleteConserve(id)
		// console.log('deleteConserve-result', result)
		// if(result){
		// 	uni.showToast({
		// 		icon: 'success',
		// 		title: '删除共同养护人成功'
		// 	})
		// 	listConserveMemberAll.value = await getConserveList(user.value.id) as unknown as IConserveMemberList
			
		// 	getConserveMember()
		// }
	}

	
	const qrCodeShow = ref<Boolean>(false)
	function onChangeShowHandler(val: boolean){
		if(val){
			qrCodeShow.value = val
		}
		else{
			qrCodeShow.value = !qrCodeShow.value
		}
	}
	
	const src= ref("/static/images/status/待审批.svg")
	const srcBack=ref('/static/images/status/返回.svg')
	const showApprovaled = ref(true)
	
</script>

<template>
	<view >
		<view class="conserve-head">
			<view class="Qrcode" @tap="qrCodeRef.value.onChangeShowHandler()">
				<up-icon name="grid" color="#00bb99" size="48" style="text-align: center;"></up-icon>
			</view>
			<view class="Qrcode" @tap="onQrcodeScanHandler(user.id)">
				<up-icon name="scan" color="#00bb99" size="48" style="text-align: center;"></up-icon>
			</view>
		</view>
		<!-- <up-divider :hairline="true"></up-divider> -->
		<view class="conserve-list">
			<view class="shenpi">
				<view class="sp-title">
					<span v-if="showApprovaled">已添加的共同养护人</span>
					<span v-else>待审批共同养护人</span>
				</view>
				<view class="sp-approva">
					<up-image v-if="showApprovaled" :show-loading="true" :src="src" width="60rpx" height="60rpx" @click="showApprovaled = !showApprovaled"></up-image>
					<up-image v-else :show-loading="true" :src="srcBack" width="60rpx" height="60rpx" @click="showApprovaled = !showApprovaled"></up-image>
					<view class="box">
						<up-badge v-if="listConserveMemberU.length" numberType="overflow" type="error" max="9" :value="listConserveMemberU.length+10"></up-badge>
					</view>
				</view>
				
			</view>
			<view v-if="listConserveMember.length">
				<siConservePersonList v-if="showApprovaled" :list="listConserveMember">
					<template #ItemOp="{obj}">
						<view class="solt-op">
							<!-- <up-button type="primary" :plain="true" size="mini" text="详情" @tap="sheep.$router.go('/pages/plant/locBreed/LocBreedEdit?id=' + obj.id)">
								
							</up-button> -->
							<navigator :url="'/pages/user/conserves/ConservePersonInfo?id='+ obj.id">
								<up-icon name="file-text" size="48rpx" style="margin-right: 32rpx;"></up-icon>
							</navigator>
							<!-- <view class="bu-edit" @tap="onNavLocBreedEditHandler(choosedLocBreed, obj.id)">
								<up-icon name="edit-pen"></up-icon>
							</view> -->
						</view>
					</template>
				</siConservePersonList>
				<siConservePersonList v-else :list="listConserveMemberU" :unApprove="true">
					<template #ItemOp="{obj}">
						<view class="solt-op">
							<!-- <up-button type="primary" :plain="true" size="mini" text="同意">
								<up-icon name="checkmark"></up-icon>
							</up-button>
							<up-button type="error" :plain="true" size="mini" text="拒绝">
								<up-icon name="close"></up-icon>
							</up-button> -->
							<navigator :url="'/pages/user/conserves/ConservePersonInfo?id='+ obj.id">
								<!-- <up-icon name="checkmark" size="48rpx" style="margin-right: 32rpx;"></up-icon> -->
								<up-image :show-loading="true" src="/static/images/icon/去审批.svg" width="40rpx" height="40rpx" style="margin-right: 32rpx;"></up-image>
							</navigator>
							<!-- <view class="bu-edit" @tap="onNavLocBreedEditHandler(choosedLocBreed, obj.id)">
								<up-icon name="edit-pen"></up-icon>
							</view> -->
						</view>
					</template>
				</siConservePersonList>
			</view>
			<s-empty v-else
			    text="暂无共同养护人"
			    icon="/static/images/empty/data-empty.png"
			/>
		</view>
		
		<view class="">
			<siPopupQrCode ref="qrCodeRef" :size="qrCode.size" :val="qrCode.val" :icon="qrCode.icon"></siPopupQrCode>
			
			<!-- <up-popup :show="qrCodeShow" mode="center" :round="10" @close="onChangeShowHandler">
				<view class="qrContainer">
					<up-qrcode :size="qrCode.size" :val="qrCode.val" :icon="qrCode.icon" @tap="onChangeShowHandler"></up-qrcode>
					<span class="qrInfo">{{qrCode.val}}</span>
					<up-divider></up-divider>
					<span class="qrInfo">邀请伙伴成为共同养护人</span>
				</view>
			</up-popup> -->
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// :qrCodeShow="true" 
	.conserve-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 8rpx;
		border-bottom: 1rpx #f0f0f0 solid;
		background-color: #fff;
		.Qrcode{
			width: 50%;
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
	}
	.shenpi{
		width: auto;
		height: 60rpx;
		padding-left: 18rpx;
		padding-right: 18rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		background-color: #fff;
		// border: red 1rpx solid;
		.sp-title{
			width: 80%;
			margin-right: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// border: red 1rpx solid;
		}
		.sp-approva{
			// border: blue 1rpx solid;
			display: flex;
			flex-direction: row;
			.box{
				width: auto; 
				height: auto;
			}
		}
	}
</style>
